<template>
  <div class="Bigbox">
    <!-- 内容 -->
    <div class="main" style="pading: 0">
      <div class="top">
        <!-- 1 -->

        <el-col :span="8" class="el-col1">
          <el-card shadow="hover">
            <div class="tubiao" style="background-color: rgb(84, 173, 235)">
              <div class="title">今日访问</div>
              <div class="fonts">{{ count.currentday.total }}</div>
            </div>
            <div class="one">
              <ul>
                <li class="shen">待审核：{{ count.currentday.wait }} 人</li>
                <li class="tong">未通过：{{ count.currentday.pass }} 人</li>
                <li>已取消：{{ count.currentday.cancel }} 人</li>
              </ul>
            </div>
          </el-card>
        </el-col>
        <!-- 2 -->
        <el-col :span="8">
          <el-card shadow="hover">
            <div class="tubiao" style="background-color: rgb(250, 88, 34)">
              <div class="title">昨日访客</div>
              <div class="fonts">{{ count.yesterday.total }}</div>
            </div>
            <div class="one">
              <ul>
                <li class="shen">待审核：{{ count.yesterday.wait }} 人</li>
                <li class="tong">未通过：{{ count.yesterday.pass }} 人</li>
                <li>已取消：{{ count.yesterday.cancel }} 人</li>
              </ul>
            </div>
          </el-card>
        </el-col>
        <!-- 3 -->
        <el-col :span="8">
          <el-card shadow="hover">
            <div class="tubiao" style="background-color: rgb(0, 151, 137)">
              <div class="title">最近七天</div>
              <div class="fonts">{{ count.week.total }}</div>
            </div>
            <div class="one">
              <ul>
                <li class="shen">待审核：{{ count.week.wait }} 人</li>
                <li class="tong">未通过：{{ count.week.pass }} 人</li>
                <li>已取消：{{ count.week.cancel }} 人</li>
              </ul>
            </div>
          </el-card>
        </el-col>
        <!-- 4 -->
        <el-col :span="8">
          <el-card shadow="hover">
            <div class="tubiao" style="background-color: rgb(247, 184, 36)">
              <div class="title">近三十天</div>
              <div class="fonts">{{ count.month.total }}</div>
            </div>
            <div class="one">
              <ul>
                <li class="shen">待审核：{{ count.month.wait }} 人</li>
                <li class="tong">未通过：{{ count.month.pass }} 人</li>
                <li>已取消：{{ count.month.cancel }} 人</li>
              </ul>
            </div>
          </el-card>
        </el-col>
        <!-- 5 -->
        <el-col :span="8">
          <el-card shadow="hover">
            <div class="tubiao" style="background-color: rgb(48, 65, 86)">
              <div class="title">最近一年</div>
              <div class="fonts">{{ count.year.total }}</div>
            </div>
            <div class="one">
              <ul>
                <li class="shen">待审核：{{ count.year.wait }} 人</li>
                <li class="tong">未通过：{{ count.year.pass }} 人</li>
                <li>已取消：{{ count.year.cancel }} 人</li>
              </ul>
            </div>
          </el-card>
        </el-col>
      </div>

      <!-- 图表 -->
      <div class="conter">
        <el-card class="box-card">
          <div id="myChart123" :style="{ width: '100%', height: '400px' }"></div>
        </el-card>
      </div>

      <!-- 本周详情 -->
      <div class="conter">
        <div class="box-card2">
          <div class="title2">本周详情</div>

          <div class="body">
            <div class="list" style="display:flex;">

              <span class="ben">本周人员统计表：</span>
              <el-table :data="count.weekday" border style="width: 25%; margin-right: 20px;">
                <el-table-column prop="time" label="日期" width="180" />
                <el-table-column prop="num" label="人数" />
              </el-table>

              <span class="ben">本周人员申请类型表：</span>
              <el-table :data="count.weektype" border style="width: 30%">
                <el-table-column prop="time" label="日期" width="180" />
                <el-table-column label="类型">
                  <template #default="scope">
                    {{ scope.row.type===1?"外来":(scope.row.type===2?"老师" : '学生') }}
                  </template>
                </el-table-column>
                <el-table-column prop="num" label="人数" />
              </el-table>

            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>
  
<script setup lang='ts'>
// 接口
import { reactive, ref, onMounted } from "vue";
import { countList } from "../../api/visituser"; //访客统计
import * as echarts from "echarts";

// 接口数据
const data = reactive({
  from: {
    departmentid: 1, //部门id
  },
});
let count: any = ref({
  currentday: {
    //今日
    total: 0,
    wait: 0,
    pass: 0,
    cancel: 0,
  },
  yesterday: {
    //昨天
    total: 0,
    wait: 0,
    pass: 0,
    cancel: 0,
  },
  week: {
    //近七天
    total: 0,
    wait: 0,
    pass: 0,
    cancel: 0,
  },
  month: {
    //近30天
    total: 0,
    wait: 0,
    pass: 0,
    cancel: 0,
  },
  year: {
    //近一年
    total: 0,
    wait: 0,
    pass: 0,
    cancel: 0,
  },
  weekday: [
    //近一周每天的总数
    {
      time: '',
      num: 0,
    },
  ],
  weektype: [
    //近一周每天申请的人员类型 1 外来 2 老师 3 学生
    {
      time: "",
      type: 1,
      num: 0,
    },
  ],
  weektype2: [
    //近一周每天申请的人员类型 1 外来 2 老师 3 学生
    {
      time: "",
      type: 2,
      num: 0,
    },
  ],
  weektype3: [
    //近一周每天申请的人员类型 1 外来 2 老师 3 学生
    {
      time: "",
      type: 3,
      num: 0,
    },
  ],
});

// 访客统计
const getCountList = async () => {
  const res: any = await countList(data);
  console.log("访客统计", res);
  if (res.code === "00000") {
   // count.value = res.data;
   count.value.currentday = res.data.currentday;
    count.value.month = res.data.month;
    count.value.week = res.data.week;
    count.value.weekday = res.data.weekday;
    count.value.weektype = res.data.weektype;
    count.value.weektype2 = res.data.weektype;
    count.value.weektype3 = res.data.weektype;
    count.value.year = res.data.year;
    count.value.yesterday = res.data.yesterday;
  }
};



 //访客统计
//console.log(count.value);


// // 图表
let echart = () => {
  let myChart = echarts.init(document.getElementById("myChart123") as HTMLElement);
  // 绘制图表
  myChart.setOption({
    title: {
      text: '访客记录变化图'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['近七天总数', '近七天外来人员', '近七天来访老师', '近七天来访学生']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: false
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: count.value.weekday.map((item:any)=>{
          return item.time   //时间
        })
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '近七天总数',
        type: 'line',
        stack: 'Total',
        smooth: true,
        data: count.value.weekday.map((item:any)=>{
          return item.num
        })
      },
      {
        name: '近七天外来人员',
        type: 'line',
        stack: 'Total',
        smooth: true,
        data: count.value.weektype.map((item:any)=>{
          return item.num
        })
      },
      {
        name: '近七天来访老师',
        type: 'line',
        stack: 'Total',
        smooth: true,
        data: count.value.weektype2.map((item:any)=>{
          return item.num
        })
      },
      {
        name: '近七天来访学生',
        type: 'line',
        stack: 'Total',
        smooth: true,
        data: count.value.weektype3.map((item:any)=>{
          return item.num
        })
      }
    ]
  });
  window.onresize = function () { // 自适应大小
    myChart.resize();
  };
}
onMounted(async () => {
  await getCountList()
  await echart()
});
</script>
  
<style scoped lang='less'>
* {
  margin: 0;
  padding: 0;
}

.main {
  background-color: #ededed;
  margin-top: 10px;
  width: 100%;
  height: 100%;
  padding-bottom: 1px !important;
  border-radius: 10px;
}

.top {
  width: 98%;
  height: 40%;
  margin: 0 auto;
  font-size: 14px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 16px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.el-col-8 {
  width: 481px;
  align-items: center;
  margin-top: 30px;
  border-radius: 12px;
  // background: red;
  color: #554e4e;
}

/deep/.el-card__body {
  padding: 0 !important;
  // width: 481px;
  // background: blue;
  border-radius: 10px;
  // 演示
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;

  height: 20%;
}

.el-card {
  width: 400px;
  // background: gold;
  border-radius: 10px;
}

.box-card {
  width: 100%;
  border-radius: 10px;
}

.box-card2 {
  width: 99%;
  border-radius: 10px;
  background-color: #fff;
  padding-right: 10px;
  box-shadow: 10px 10px 10px 10px rgba(220, 212, 212, 0.5);
}

#myChart123 {
  padding-top: 20px;
}

.tubiao {
  width: 40%;
  height: 100%;
  background: red;
  border-radius: 10px;
}

.one {
  width: 55%;
  height: 100%;
  margin-right: 5px;

  ul {
    list-style: none;
    font-size: 14px;

    li {
      line-height: 30px;
    }

    .shen {
      text-align: left;
      width: 100%;
      height: 28%;
      margin-top: 10%;
      font-size: 17px;
    }

    .tong {
      float: left;
      margin-right: 4%;
    }
  }
}

.el-card[data-v-868be962] {
  width: 400px;
  border-radius: 10px;
}

.el-col1 {
  width: 100%;
}

.title {
  font-size: 14.5px;
  color: #fff;
}

.body {
  margin-top: 20px;
  padding-bottom: 20px;

}

.fonts {
  font-size: 55px;
  font-weight: 700;
  width: 100%;
  text-align: center;
  color: #fff;
  margin-top: 5%;
}

// conter
.conter {
  margin: 0 auto;
  margin-top: 40px;
  margin-bottom: 20px;
  width: 98%;
  // background: red;
}

.title2 {
  width: 100%;
  padding: 18px 20px;
  border-bottom: 1px solid #ced1d8;
  box-sizing: border-box;
  // background: forestgreen;
  color: #000;
}

.list {
  margin-left: 20px;
}

.chart {
  width: 100%;
  height: 400px;
}

.ben {
  font-weight: 900;
  font-size: 15px;
}</style>